<template>
	<div class="card-box age-box">
		<card-title title="上岗人员年龄分布"></card-title>
		<div class="ratio-box">
			<div class="pie" ref="ageBox"></div>
		</div>
	</div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, watch } from "vue";
import { useStore } from 'vuex'

const store = useStore()

const props = defineProps({
	list: {
		type: Array,
		default: [],
	},
});

const datas = $ref([]);

let eCharts = null;
let ageBox = $ref(null);
watch(
	() => props.list,
	(newV, oldV) => {
		datas = []
		newV.forEach((it) => {
			let obj = {
				value: it.val2,
				name: it.val1,
			};
			datas.push(obj);
		});
		if(eCharts) {
			eCharts.clear()
			init('refresh')
		}else{
			init()
		}
	}
);


const init = (type) => {
	let option = {
		title: [
			{
				text: "年龄比例",
				top: "center",
				left: "23%",
				textAlign: "center",
				textStyle: {
					color: "#ffffff",
					fontSize: "16px",
				},
			},
		],
		tooltip: {
			show: false,
		},
		legend: {
			top: "center",
			right: "1%",
			orient: "",
			textStyle: {
				color: "#ffffff",
				fontSize: 15
			},
			icon: 'circle',
			itemGap: 20,
			borderRadius: 50,
			formatter: function (item) {
				let str = "";
				props.list.forEach((it) => {
					if (it.val1 == item) {
						str = `${item}: ${it.val3} ${it.val2}人`;
					}
				});
				return str;
			}
		},
		series: [
			{
				name: "Access From",
				type: "pie",
				radius: ["40%", "60%"],
				center: ["25%", "50%"],
				// avoidLabelOverlap: false,
				itemStyle: {
					normal: {
						label: {
							show: false,
						},
						labelLine: {
							show: false,
						},
					},
				},
				// emphasis: {
				// 	label: {
				// 		show: true,
				// 		fontSize: "40",
				// 		fontWeight: "bold",
				// 	},
				// },
				labelLine: {
					show: false,
				},
				data: datas
			},
		],
	};

	if(!type) eCharts = echarts.init(ageBox);
	eCharts.setOption(option);
};
</script>

<style scoped lang="scss">
@import "../../../../../assets/css/common.scss";
.age-box {
	width: 100%;
	height:322px;
	margin-top: 14px;
	.ratio-box {
		background: url("../../../../../assets/images/home/age-bg.png") no-repeat;
		background-size: 48% ;
		background-position: 1.6% center;
		margin-top: 20px;
		.pie {
			width: 100%;
			height: 244px;
		}
	}
}
</style>
